<template>
	<view class="checkInDetail">
		<view class="list">
			
			<block v-for="(item,index) in sign_list" :key="index" v-if="index == 0 || item.month != sign_list[index-1].month">
				<view class="monthTime" >{{item.month}}</view>
				<view class="checkedInList">
					<view class="item flex_space_b" v-for="(itm,idx) in sign_list" :key="idx" v-if="itm.month==item.month">
						<view class="right">
							<view class="titleBox">{{itm.remark}}</view>
							<view class="time">{{itm.day}}</view>
						</view>
						<view class="left">+{{itm.amount}}<block v-if="itm.type == '10'">积分</block><block v-else>元</block></view>
					</view>
				</view>
			</block>
			
			
		</view>
		
		<view class="noContent" v-if="sign_list.length == 0">
		  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				p: 1,
				is_loading: false,
				is_more: true,
				sign_list: []
			}
		},
		onLoad() {
			this.loadData();
		},
		onReachBottom() {
			if (!this.is_loading) {
				if (!this.is_more) {
					util.toast("没有更多数据了");
					return false;
				}
				this.p = parseInt(this.p) + 1;
				this.loadData();
			}
		},
		methods: {
			loadData: function() {
				// 加载数据
				var that = this;
				this.is_loading = true;
				let data = {
					'p': this.p
				};
				util.requestPost("api.php/userSign/signList", data, function(res) {
					let is_more = false;
					if (res.data.sign_list.length >= 15) {
						is_more = true;
					}
					if (that.p == 1) {
						that.sign_list = res.data.sign_list;
					} else {
						that.sign_list = that.sign_list.concat(res.data.sign_list);
					}
			
					that.is_loading = false;
					that.is_more = is_more;
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.checkInDetail {
	background-color: var(--bgColor);
	min-height: 100%;
	.list {
		.monthTime {
			line-height: 68rpx;
			font-size: 24rpx;
			color: #666666;
			padding: 0 28rpx;
		}
		.checkedInList {
			background-color: #FFFFFF;
			padding: 0 28rpx;
			.item {
				padding: 28rpx 0;
				border-bottom: 1px solid #EEEEEE;
				.right {
					.titleBox {
						font-size: 28rpx;
					}
					.time {
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
					}
				}
				.left {
					color: var(--primaryColor);
				}
			}
		}
	}
}
</style>
